<template>
	<view class="guanjia">
		<!-- 头部组件 -->
		<view class="topNavWarp">
			<NavBar title="管家" leftIcon="/static/img/index/119.png"></NavBar>
			<view class="tabNav">
				<view class="" :style="{ background: cur === i ? 'rgba(255,255,255,0.3)' : 'rgba(255,255,255,0)' }" v-for="(v, i) in tabNavList" key="i" @tap="tabClick(i, v)">
					<text :style="{ color: cur === i ? '#fff' : '#9AB8FB' }">{{ v.name }}</text>
				</view>
			</view>
		</view>
		
		<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback">
			<listItemVue @itemClick="jumpItem" :item="item" v-for="(item, index) in list" key="index" />
		</mescroll-body>
	</view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { onPageScroll, onReachBottom } from '@dcloudio/uni-app';
import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll.js';
import NavBar from '@/components/navBar.vue';
import listItemVue from './components/listItem.vue';
import { getHousekeeperView } from '@/utils/api/homeServer';

const cur = ref(0);
const sellType = ref('ONLINE');
const list = ref([]);
const tabNavList = ref([
	{ id: 0, name: '线上', value: 'ONLINE' },
	{ id: 1, name: '线下', value: 'OFFLINE' }
]);

const jumpItem = (item:any) => {
	
	/**
	 * 订单类型    不同类型眺不同页面
	 * SHOP_ORDER  生活订单
	 * WORK_ORDER  人力兼职订单
	 * MAP_WORK_ORDER 地图服务订单
	 */
	console.log(item.businessType);

	if(item.businessType === "SHOP_ORDER"){
		// 生活订单
		uni.navigateTo({
			url: `/pages/lifeOrderDetails/index?groupOrderNo=${item?.groupOrderNo}`
		})
	}else if(item.businessType === "WORK_ORDER"){
		// 人力兼职订单
		// gzType 0:雇佣者 1:服务者 2:底部无操作按钮
		let datas ={
			gzType: item?.userType === 'EMP' ? 1:0,
			...item
		}
		uni.navigateTo({
			url: `/pages/parttimeJob/details?data=${JSON.stringify(datas)}`
		})
		
	}else if(item.businessType === "MAP_WORK_ORDER"){
		// 地图服务订单
		uni.navigateTo({
			url: `/pages/requirementDetails1/index?id=${item?.id}`
		})
	}
}



const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom);

const upCallback = (mescroll: any) => {
	getHousekeeperView({
		data: {
			pageNo: mescroll.num,
			pageSize: mescroll.size,
			sellType: sellType.value
		}
	})
		.then((res) => {
			console.log(res.data);
			const curPageData = res.data.list || []; // 当前页数据
			if (mescroll.num == 1) list.value = []; // 第一页需手动制空列表
			list.value = list.value.concat(curPageData); //追加新数据
			//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
			//mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;

			//方法一(推荐): 后台接口有返回列表的总页数 totalPage
			mescroll.endByPage(curPageData.length, res.data.pages); //必传参数(当前页的数据个数, 总页数)

			//方法二(推荐): 后台接口有返回列表的总数据量 totalSize
			// console.log(res.data.data.total);
			// mescroll.endBySize(curPageData.length, res.data.data.total); //必传参数(当前页的数据个数, 总数据量)

			//方法三(推荐): 您有其他方式知道是否有下一页 hasNext
			//mescroll.endSuccess(curPageData.length, hasNext); //必传参数(当前页的数据个数, 是否有下一页true/false)

			//方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据.
			// mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载
		})
		.catch(() => {
			mescroll.endErr();
		});
};

const tabClick = (index: any, item: any) => {
	cur.value = index;
	sellType.value = item.value;
	downCallback()
};
</script>

<style lang="scss" scoped>
:deep(.navBarTop) {
	background-color: transparent;
	color: #fff;
}

page {
	background-color: #f4f6fa;
}

.guanjia {
	flex: 1;
	background-image: url('@/static/img/homeServer/navbg_guanjia.png');
	background-repeat: no-repeat;
	background-size: 100% 450rpx;
}

.tabNav {
	display: flex;
	padding: 36rpx 100rpx 24rpx 100rpx;

	> view {
		flex: 1;
		display: flex;
		justify-content: center;
		background-color: #fff;
		padding: 14rpx;
		border-radius: 32rpx;
		

		text {
			text-align: center;
		}
	}
}
</style>
